<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>授权系统</title>
	<link rel="shortcut icon" href="favicon.ico">
	<link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
	<link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
	<link href="../static/css/login.min.css" th:href="@{/css/login.min.css}" rel="stylesheet"/>
	<link href="../static/ruoyi/css/ry-ui.css" th:href="@{/ruoyi/css/ry-ui.css?v=4.7.7}" rel="stylesheet"/>
	<!-- 360浏览器急速模式 -->
	<meta name="renderer" content="webkit">
	<!-- 避免IE使用兼容模式 -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link rel="shortcut icon" href="../static/favicon.ico" th:href="@{favicon.ico}"/>
	<style type="text/css">
	.bs-example {
		position: relative;
	  	padding: 10px 15px 15px;
	  	margin: 0 15px 15px;
	  	border-color: #e5e5e5 #eee #eee;
	  	border-style: solid;
	  	border-width: 1px 0;
	  	box-shadow: inset 0 3px 6px rgba(0, 0, 0, .05);
	}
	.bs-example:after {
		position: absolute;
	  	top: 15px;
	  	left: 15px;
	  	font-size: 12px;
	  	font-weight: 700;
	  	color: #959595;
	  	text-transform: uppercase;
	  	letter-spacing: 1px;
	  	text-align: center;
	  	/* content: "授权"; */
	}
	.user-info-head>img {
	    max-width: 70px;
	    height: auto;
	    margin-top: 30px;
	}
	.footerx{
	  	width: 100%;
	  	position: absolute;
	  	bottom: 20px;
	  	height: auto;
	}
	.signinpanel {
	    color: #000;
	}
	label.error {
		position: initial;
	}
	</style>
	<script th:inline="javascript"> var ctx = [[@{/}]]; var captchaType = [[${captchaType}]]; </script>
	<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
	<script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
	<script src="../static/ajax/libs/validate/jquery.validate.min.js" th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
	<script src="../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
	<script src="../static/ajax/libs/blockUI/jquery.blockUI.js" th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
	<script src="../static/ruoyi/js/ry-ui.js" th:src="@{/ruoyi/js/ry-ui.js?v=4.7.7}"></script>
	<script src="../static/ruoyi/login.js" th:src="@{/ruoyi/login.js}"></script>
</head>

<body class="signin1">
	<div th:if="${user != null}">
		<div class="text-center">
		    <p class="user-info-head">
		    	<img th:src="(${#strings.isEmpty(user.avatar)}) ? @{/img/profile.jpg} : @{${user.avatar}}" th:onerror="this.src='../img/profile.jpg'" class="img-circle" alt="User Image">
			</p>
			<p>[[${user.loginName}]]</p>
		</div>
		
		<form class="bs-example bs-example-form" data-example-id="simple-input-groups">
			<br>
			<label for="basic-url">序列号</label>
		    <div class="input-group" style="width: 100%;">
		      <input type="text" name="code" class="form-control" placeholder="序列号" aria-describedby="basic-addon1" th:value="${code}" readonly />
		    </div>
		    <br>
		    <label for="basic-url">授权期限</label>
		    <div class="input-group" style="width: 100%;">
				<div class="btn-group" data-toggle="buttons" style="width: 100%;">
				  <label class="btn btn-default" style="width: 25%">
				    <input type="radio" name="grantLimit" value="1m"> 一个月
				  </label>
				  <label class="btn btn-default" style="width: 25%">
				    <input type="radio" name="grantLimit" value="6m"> 半年
				  </label>
				  <label class="btn btn-default active" style="width: 25%">
				    <input type="radio" name="grantLimit" value="1y" checked> 一年
				  </label>
				  <label class="btn btn-default" style="width: 25%">
				    <input type="radio" name="grantLimit" value="fe"> 永久
				  </label>
				</div>
		    </div>
		    <br>
		    <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
		      <div class="btn-group" role="group">
		        <button type="button" class="btn btn-success" onclick="grantxxx()">生成授权码</button>
		      </div>
		    </div>
		    <br>
			<div name="grantCodeDiv" class="alert alert-success" role="alert" style="line-height: 30px; display:none;">
		      <strong>授权码</strong> <span name="grantCodeSpan" style="color: red;"></span>
		      <span class="label label-primary" onclick="copy()" style="margin-left: 20px;cursor:pointer;">copy</span>
		      <br>
		      <strong>授权至</strong> <span name="grantLimitSpan" style="color: red;"></span>
		    </div>
		</form>
		
		<div class="text-center">
			<div class="footerx">
				<a href="javascript:indx()" style="float: left; margin-left: 25px;">系统管理</a>
				<a href="javascript:logout()" style="float: right; margin-right: 25px;">退出登录</a>
			</div>
		</div>
	</div>
	<div th:if="${user == null}">
		<input type="hidden" name="grantxxx"/>
	    <div class="signinpanel">
	        <div class="row">
	            <div class="col-sm-7">
	            </div>
	            <div class="col-sm-5" style="width: 100%; margin-left: auto; margin-right: auto; float: none;">
	                <form id="signupForm" autocomplete="off">
	                    <h4 class="no-margins">登录：</h4>
	                    <input type="text"     name="username" class="form-control uname"     placeholder="用户名" value=""    />
	                    <input type="password" name="password" class="form-control pword"     placeholder="密码"   value="" />
						<div class="row m-t" th:if="${captchaEnabled==true}">
							<div class="col-xs-6">
							    <input type="text" name="validateCode" class="form-control code" placeholder="验证码" maxlength="5" />
							</div>
							<div class="col-xs-6">
								<a href="javascript:void(0);" title="点击更换验证码">
									<img th:src="@{/captcha/captchaImage(type=${captchaType})}" class="imgcode" width="85%"/>
								</a>
							</div>
						</div>
	                    <div class="checkbox-custom" th:if="${isRemembered}" th:classappend="${captchaEnabled==false} ? 'm-t'">
					        <input type="checkbox" id="rememberme" name="rememberme"> <label for="rememberme">记住我</label>
					    </div>
	                    <button class="btn btn-success btn-block" id="btnSubmit" data-loading="正在验证登录，请稍候...">登录</button>
	                </form>
	            </div>
	        </div>
	    </div>	
	</div>

</body>	
</html>
<script lang="javascript">
function grantxxx() {
    $.modal.loading($("#btnSubmit").data("loading"));
    $.ajax({
        type: "post",
        url: ctx + "grantxxx",
        data: {
            "code": '[[${code}]]',
            "grantLimit": $("input[name='grantLimit']:checked").val()
        },
        success: function(r) {
            if (r.code == web_status.SUCCESS) {
				$("div[name='grantCodeDiv']").show();
				$("span[name='grantCodeSpan']").html(r.grantCode);
				$("span[name='grantLimitSpan']").html(r.grantLimit);
            } else {
            	$.modal.msg(r.msg);
            }
            $.modal.closeLoading();
        }
    });
}
function indx() {
    location.href= ctx + 'index'
}	
function logout() {
    $.modal.loading($("#btnSubmit").data("loading"));
    $.ajax({
        type: "post",
        url: ctx + "logout",
        success: function(r) {
            location.reload();
            $.modal.closeLoading();
        }
    });
}

function copy() {
	var element = createElement($("span[name='grantCodeSpan']").html());
    element.select();
    element.setSelectionRange(0, element.value.length);
    document.execCommand('copy');
    element.remove();
    
    $.modal.msg('已复制到剪切板');
}

//创建临时的输入框元素
function createElement(text) {
    var isRTL = document.documentElement.getAttribute('dir') === 'rtl';
    var element = document.createElement('textarea');
    // 防止在ios中产生缩放效果
    element.style.fontSize = '12pt';
    // 重置盒模型
    element.style.border = '0';
    element.style.padding = '0';
    element.style.margin = '0';
    // 将元素移到屏幕外
    element.style.position = 'absolute';
    element.style[isRTL ? 'right' : 'left'] = '-9999px';
    // 移动元素到页面底部
    let yPosition = window.pageYOffset || document.documentElement.scrollTop;
    element.style.top = `${yPosition}px`;
    //设置元素只读
    element.setAttribute('readonly', '');
    element.value = text;
    document.body.appendChild(element);
    return element;
}
</script>
